<div id="aside" v-cloak>
    <el-aside v-if="!navTabs.state.tabFullScreen" :class="'layout-aside-' + config.layout.layoutMode + ' ' + (config.layout.shrink ? 'shrink' : '')" :style="'width: ' + config.menuWidth()">

        <Logo v-if="config.layout.menuShowTopBar" ></Logo>
        <menu-vertical :route="route"> </menu-vertical>

    </el-aside>
</div>

<script data-render="script">
    var Aside={
        setup(){
            const navTabs = useNavTabs();
            const config = useConfig();

            createAxios({
                url:'index/index',
                method:'get',
            }).then(res=>{
                if (res.code==1) {
                    route.handleAdminRoute(res.data.menus)
                }
            })

            const value = config.layout.layoutMode != "Streamline" ? config.getColorVal("menuTopBarBackground") :"transparent";
            document.documentElement.style.setProperty('--menu-topbar-background', value);
            return {
                config:config,
                navTabs:navTabs,
                route:Config.route
            }
        }
    }

    const components = {
        Logo,
        MenuVerticalChildren,
        'menu-vertical': MenuVertical,
        'menu-tree': MenuTree,
        MenuHorizontal
    }
    createVue('aside', Aside, components);
</script>